

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,   user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
	
          <!-- https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/tabbar.html -->
	

          
		<!--App自定义的css-->
		<!-- <link rel="stylesheet" type="text/css" href="../css/app.css"/> -->


	<!--标准mui.css-->
        <!-- 第一步引入mui css -->
        <link rel="stylesheet" href="./assets/mui/css/mui.min.css">
		<link rel="stylesheet" href="./assets/mui/css/icons-extra.css">
      <link rel="stylesheet" href="./assets/mui/fonts/mui-icons-extra.ttf">
        <link rel="stylesheet" href="./common.css">


		<style>
            .codeBox {
                position: relative;
            }
			

            #getCode {

            position: absolute; 
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            color: red;
            z-index: 2;
            font-size: 14px;

           }

		
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-search mui-icon mui-icon-search  mui-pull-right"></a>
			<h1 class="mui-title">我的注册页面</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="index.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="category.html">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">分类</span>
			</a>
			<a class="mui-tab-item" href="cart.html">
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart"> <span class="mui-badge">9</span></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item  mui-active" href="user.html">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>用户名</label>
					<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入用户名">
				</div>
                <div class="mui-input-row">
					<label>手机</label>
					<input id='phone' type="text" class="mui-input-clear mui-input" placeholder="请输入手机">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input id='password' type="password" class="mui-input-password" placeholder="请输入密码">
                    <!-- <span class="mui-icon mui-icon-eye mui-active"></span> -->
				</div>
				<div class="mui-input-row">
					<label>确认密码</label>
					<input id='password_confirm' type="password" class="mui-input-password" placeholder="请确认密码">
                    <!-- <span class="mui-icon mui-icon-eye mui-active"></span> -->
				</div>
				<div class="mui-input-row   codeBox">
					<label>验证码</label>
                    
					<input id='v_code' type="text" class="mui-input-clear mui-input" placeholder="请输入验证码">
                    <span class="getCode" id="getCode">获取认证码</span>
                   
                    
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='reg' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
			</div>
			<div class="mui-content-padded">
				<p>注册真实可用，注册成功后的用户可用于登录，但是示例程序并未和服务端交互，用户相关数据仅存储于本地。</p>
			</div>
            <div class="link-area"><a id='reg'     style="color: red;"   href="login.html">去登录</a>
            </div>

          
              
           

		</div>



	</body>
	<script src="./assets/mui/js/mui.min.js"></script>
	
	<!-- 移动端的jq -->
	<script src="./assets/zepto/zepto.min.js"></script>
	<!-- 模块引擎 -->
	<script src="./assets/artTemplate/template-web.js"></script>
	<script src="./common.js"></script>

    <script src="./js/register.js"></script>
	<!-- <script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
	</script> -->



	<script>




	</script>

</html>
